<template>
  <div class="toplist-body clearfix">
    <div class="g-sd3">
      <ul class="toplists">
        <li
          v-for="(item, index) in tracksList"
          :key="index"
          @click="getview(item.id)"
        >
          <img :src="item.coverImgUrl" alt="" />
          <p>
            <span href="javascript:;">{{ item.name }}</span>
          </p>
          <p>{{ item.updateFrequency }}</p>
        </li>
      </ul>
    </div>
    <div class="g-right">
      <div class="g-wrap clearfix">
        <div class="img-bg">
          <img :src="viewList.coverImgUrl" alt="" />
          <span class="g-mask"></span>
        </div>
        <div class="gr-tt">
          <h2>{{ viewList.name }}</h2>
        </div>
      </div>
      <div class="songs-item">
        <div class="item-title">
          <h3>
            <span>歌曲列表</span>
            <a href="javascript:;"> 播放：{{ viewList.playCount }}次 </a>
          </h3>
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%" stripe>
        <el-table-column #default="scope" label="" width="70" >
          <template>
            <div>{{ scope.$index+1}}</div>
          </template>
        </el-table-column>
        <el-table-column label="标题" width="326" #default="scope">
          <!-- <img :src="scope.row.al.picUrl" alt="" width="50" /> -->
          <span>{{ scope.row.name }}</span>
        </el-table-column>
        <el-table-column label="时长" with="90" #default="scope">
          {{ scope.row.publishTime }}
        </el-table-column>
        <el-table-column label="歌手">
          <template #default="scope">
            <div>
              {{ scope.row.ar[0].name }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getTracks } from "@/api/singer";
export default {
  data() {
    return {
      tracksList: [],
      viewList: [],
      tableData: [],
      id: "19723756",
    };
  },
  created() {
    this.gettop();
    this.getview(this.id);
  },
  methods: {
    async gettop() {
      let res = await getTracks();
      this.tracksList = res.list;
    },
    async getview(index) {
      this.id = index;
      // let res=await playlist(this.id)
      let res = await fetch(
        `http://music.eleuu.com/playlist/detail?id=${this.id}`
      ).then((res) => res.json());
      this.viewList = res.playlist;
      this.viewList.tracks.forEach((ele) => {
        this.tableData.push(ele);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.item-title h3 a {
  display: inline-block;
  float: right;
}
</style>